<template>
  <div class="myself-container">
    <div class="box1">
      <van-icon name="manager" size="24px" color="#ffffff" />
    </div>
    <div class="box2">
      <van-image
        round
        width="94px"
        height="94px"
        src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        class="pic"
      />
      <div style="width: 100%; position: absolute; top: 55px">
        <p style="font-size: 24px; margin: 10px 0">热心市民李先生</p>
        <span style="font-size: 14px; color: #c1c0c9">ID: 1069643013</span>
      </div>
      <van-grid :border="false" :center="false" class="g_item" square>
        <van-grid-item>
          <span>红包</span>
          <p>128</p>
        </van-grid-item>
        <van-grid-item>
          <span>优惠劵</span>
          <p>12张</p>
        </van-grid-item>
        <van-grid-item>
          <span>鲜豆</span>
          <p>88</p>
        </van-grid-item>
        <van-grid-item>
          <span>白条</span>
          <p>1000</p>
        </van-grid-item>
      </van-grid>

      <div class="mybody">
        <van-cell is-link icon="gold-coin" to="mm">
          <template #title>
            <span class="custom-title">我的钱包</span>
          </template>
        </van-cell>
        <van-cell is-link icon="map-marked" to="ress">
          <template #title>
            <span class="custom-title">我的地址</span>
          </template>
        </van-cell>
        <van-cell is-link icon="friends" to="dd">
          <template #title>
            <span class="custom-title">客服与帮助</span>
          </template>
        </van-cell>
      </div>
    </div>

    <jd-footer></jd-footer>
  </div>
</template>

<script>
import JdFooter from "@/components/footer/Footer.vue";
export default {
  name: "myself",
  components: {
    JdFooter,
  },
};
</script>

<style lang="less" scoped>
.myself-container {
  height: 740px;
  background: #ffffff;
}
.box1 {
  position: fixed;
  top: 0;
  margin-top: 20px;
  width: 100%;
  height: 250px;
  background-image: linear-gradient(239deg, #3a6ff3 0%, #50c7fb 100%);
  border-bottom-right-radius: 70px;
  border-bottom-left-radius: 70px;
  .van-icon-manager:before {
    position: absolute;
    top: 50px;
    left: 140px;
  }
}
.box2 {
  position: relative;
  top: 130px;
  width: 339px;
  height: 203px;
  margin: 0 auto;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
  .pic {
    top: -47px;
  }
  .van-grid {
    margin-top: 35px;
    border-top: 1px solid #f1f1f1;
    height: 70px;
  }
  .g_item .van-grid-item {
    .van-grid-item__content {
      padding: 0;
      height: 85px;
    }
    span {
      font-size: 12px;
      color: #c1c0c9;
    }
    p {
      margin: 10px 0;
      font-size: 20px;
      color: #262628;
    }
  }
  /deep/ .van-grid-item__content {
    height: 60px;
    padding: 0;
    margin-top: 5px;
  }
}
.mybody {
  .van-cell:first-child {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }
  .van-cell:last-child {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  margin-top: 20px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
  text-align: left;
}
</style>